<template>
  <div class="doff-broken">
    <BasicCard style="margin-bottom: 20px">
      <BasicVxeTable ref="gridRef" v-bind="gridOption">
        <template #header_group1>
          <div>
            启动
            <el-popover content="1%" placement="bottom">
              <template #reference>
                <el-icon><QuestionFilled /></el-icon>
              </template>
            </el-popover>
          </div>
        </template>
        <template #header_group2>
          <div>
            小纱
            <el-popover content="30%" placement="bottom">
              <template #reference>
                <el-icon><QuestionFilled /></el-icon>
              </template>
            </el-popover>
          </div>
        </template>
        <template #header_group3>
          <div>
            中纱
            <el-popover content="80%" placement="bottom">
              <template #reference>
                <el-icon><QuestionFilled /></el-icon>
              </template>
            </el-popover>
          </div>
        </template>
      </BasicVxeTable>
    </BasicCard>
    <div class="other-container">
      <div class="image-text"></div>
      <div class="card-box">
        <div class="card-item" v-for="(item, index) in cardInfo" :key="index">
          <div class="item-left">
            <img :src="item.img" alt="" />
            <span>{{ item.label }}</span>
          </div>
          <div class="item-right">
            <span class="text">{{ item.value }}</span>
            <span class="unit">{{ item.unit }}</span>
          </div>
        </div>
      </div>
      <div class="chart-box">
        <WindingChart :itemData="echartData"></WindingChart>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import dayjs from 'dayjs'
  import { PARAMS_LIST_ENUM, RATIO_LIST_ENUM } from '@/utils/constants/common'
  import { DoffBrokenTableColumns } from '../../data'
  import { DoffBrokenRowVO } from '../../types'
  import { QuestionFilled } from '@element-plus/icons-vue'
  import { postLuoShaFenXi, postDingSuAndQianDingShiDuanTou } from '@/api/shengChanJianShi'
  import WindingChart from '../../../businessComponents/windingChart.vue'

  const props = defineProps({
    statusCode: String
  })

  const { t } = useI18n()
  const echartData = ref({})
  const seleRow = ref({})
  const sanDianTuStar = ref()
  const sanDianTuEnd = ref()
  const shanDianTuList = ref<any>([])
  const cardInfo = ref<any>([])
  const ratioList = ref<any>([])

  // 落纱预测报表
  const gridOption = reactive<BasicGridProps>({
    extraConfig: {
      title: t('custom.落纱断头'),
      isCustom: true,
      isExport: false,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `doff-broken-${props.statusCode}`, // id用于缓存,务必配置
    toolbarConfig: {}, // 工具栏
    exportConfig: {
      filename: '数据表'
    },
    maxHeight: 500,
    proxyConfig: {
      // autoLoad: false,
      // showLoading: false, // 关闭加载中
      ajax: {
        query: () => {
          // 默认接收 Promise<any[]>
          return getDoffBrokenList()
        }
      }
    },
    columns: DoffBrokenTableColumns
  })

  // 获取表格数据
  const getDoffBrokenList = () => {
    return new Promise<DoffBrokenRowVO[]>((resolve) => {
      postLuoShaFenXi({
        tsIdStart: 25070802,
        tsIdEnd: 25070802,
        machineDocumentIds: [
          '4de9c979-844d-ca98-5893-3a07f84df979',
          '5d4f3928-c1b8-4645-1636-3a07f8523dca',
          '8a961eb5-5893-ff1b-5611-3a07f8588a24',
          'ee7de5ec-780b-a6fe-8623-3a07f880f2bf'
        ]
      }).then((res: any) => {
        const formattedData = res.map((item) => {
          return {
            ...item,
            breakTimes: item.breakTimes != null ? item.breakTimes / 60 : item.breakTimes,
            spinningStart: dayjs(item.spinningStart).format('YYYY-MM-DD HH:mm'),
            spinningEnd: dayjs(item.spinningEnd).format('YYYY-MM-DD HH:mm'),
            speedAvg: item.speedAvg != null ? parseInt(item.speedAvg) : item.speedAvg
          }
        })
        // 表格数据
        resolve(formattedData)

        if (formattedData.length > 0) {
          const firstItem: any = formattedData[0]
          // 选中第一行且获取对应dom数据并渲染
          handleRowClick(firstItem)
          // 设置选中行和闪电图参数
          seleRow.value = firstItem
          sanDianTuStar.value = firstItem.spinningStart
          sanDianTuEnd.value = firstItem.spinningEnd
          shanDianTuList.value = [firstItem.machineDocumentId]

          // 更新参数列表
          cardInfo.value = PARAMS_LIST_ENUM.map((item) => {
            if (item.key == 'runTime') {
              item.value =
                dayjs(firstItem.spinningEnd).diff(firstItem.spinningStart, 'minute') -
                Math.round(firstItem.stopTime / 60)
            } else if (item.key == 'stopTime') {
              item.value =
                firstItem.stopTime != null ? Math.round((firstItem.stopTime / 60) * 10) / 10 : null
            } else if (item.key == 'midBreakCnt') {
              item.value = Math.max(
                firstItem.breakCnt - firstItem.startBreakCnt - firstItem.doffBreakCnt,
                0
              )
            } else if (item.key == 'avgBreakTimes') {
              item.value =
                firstItem.breakCnt > 0
                  ? Math.round((firstItem.breakTimes / firstItem.breakCnt) * 10) / 10
                  : 0
            } else {
              item.value = firstItem[item.key]
            }
            return item
          })

          // // 更新比例列表
          ratioList.value = RATIO_LIST_ENUM.map((biLi, index) => {
            const percentage = 100 - index * 10
            const breakLeft = firstItem[`breakCnt${percentage}Left`] || 0
            const breakRight = firstItem[`breakCnt${percentage}Right`] || 0

            biLi.changeDu = Math.floor((Number(firstItem.fixedLength) * percentage) / 100)
            biLi.duanTou_zuo = breakLeft
            biLi.duanTou_you = breakRight
            biLi.duanTou_zong = Number(breakLeft) + Number(breakRight)
            return biLi
          })
        }
      })
    })
  }

  // 表格行点击事件 刷新下方图表相关
  const handleRowClick = (item) => {
    let data = {
      machineDocumentId: item.machineDocumentId,
      startTime: item.spinningStart,
      endTime: item.spinningEnd
    }
    postDingSuAndQianDingShiDuanTou(data).then((res: any) => {
      let recordTimes: any = []
      let breakCntPerKilos: any = []
      let s11004s: any = []
      res.forEach((value) => {
        recordTimes.push(dayjs(value.recordTime).format('YYYY-MM-DD HH:mm'))
        breakCntPerKilos.push(value.breakCntPerKilo)
        s11004s.push(value.s11004)
      })
      echartData.value = {
        recordTime: recordTimes,
        breakCntPerKilo: breakCntPerKilos,
        s11004: s11004s
      }
    })
  }
</script>
<style scoped lang="scss">
  .other-container {
    display: flex;
    height: 436px;

    .image-text {
      width: 490px;
      background-color: #fff;
    }

    .card-box {
      width: 265px;
      padding: 8px 15px;
      margin: 0 15px;
      background-color: #fff;

      .card-item {
        display: flex;
        justify-content: space-between;
        height: 28px;
        padding: 0 12px;
        line-height: 28px;

        .item-left {
          font-size: 13px;

          span {
            margin-left: 13px;
            color: #202121;
          }
        }

        .item-right {
          font-size: 14px;

          .text {
            font-weight: bold;
            color: #6fc654;
          }

          .unit {
            margin-left: 20px;
          }
        }
      }

      .card-item:nth-child(even) {
        background-color: #f2f3f5;
      }
    }

    .chart-box {
      flex: 1;
      min-width: 700px;
    }
  }
</style>
